html, body {
    height: 100%;
    overflow: hidden;
}

body{
    background:transparent url(../imgs/bg.jpg) no-repeat scroll left -200px;
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    margin: 0px;
    padding: 0px;
}

.out-frame {
    -moz-box-shadow:0 0 15px #222222;
    background:transparent url(../imgs/bg-box.png) repeat scroll 0 0;
    border:1px solid #B1B1B1;
}

.in-frame {
    -moz-border-radius-bottomleft:8px;
    -moz-border-radius-bottomright:8px;
    -moz-border-radius-topleft:8px;
    -moz-border-radius-topright:8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background:transparent url(../imgs/in-frame-fill.png) repeat scroll 0 0;
    /*border:1px solid #B1B1B1;*/
    padding:0px;
    margin: 1px;
}

.in-frame-left {
    background:transparent url(../imgs/in-frame-left.png) no-repeat scroll 0 0;
    height: 100%;
}
.in-frame-right {
    background:transparent url(../imgs/in-frame-right.png) no-repeat scroll 0 0;
    float: right;
    height: 100px;
    width: 83px;
}

.in-frame-header {
    background:transparent url(../imgs/in-frame-header-mid.png) repeat-x scroll 0 0;
    height: 32px;
    margin: 0 40px;
}

.in-frame-header-left {
    background:transparent url(../imgs/in-frame-header-left.png) no-repeat scroll 0 0;
    height: 32px;
    width: 40px;
    float: left;
}
.in-frame-header-right {
    background:transparent url(../imgs/in-frame-header-right.png) no-repeat scroll 0 0;
    float: right;
    height: 32px;
    width: 40px;
}

#out-wrap {
    height:100%;
    padding:0;
}

/**
 * Style for header
 */
.tool-bar {
    height:28px;
}

#header{
    height: 40px;
    margin: -1px 15px;
    padding: 0.1px;   
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    -moz-border-radius-bottomleft:8px;
    -moz-border-radius-bottomright:8px;

}
#title {
    background:transparent url(../imgs/logo_48.png) no-repeat scroll 0 0;
    float:left;
    height:48px;
    width:48px;
}
#title h1 {
    font-family:arial,sans-serif;
    margin:10px 0 0 48px;
    padding:0;
}
#tool-bars {
    margin:3px 0 0 70px;
    padding:5px;
}

#search-bar {
    float:left;
}

#search-box {
    background:transparent url(../imgs/bg-box-black.png) repeat scroll 0 0;
    border:0 none;
    color:#FFFFFF;
    height:22px;
    margin:2px;
    max-width:400px;
    min-width:100px;
    padding-left:5px;
}

#search-btn {
    background:transparent url(../imgs/icons/22x22/search.png) no-repeat scroll 0 0;
    border:0 none;
    margin-left:-30px;
    width:40px;
}
.ubi-editor-bar-btns {
    padding-left:5px;
}

#note-new-btn-wrap {
    background:transparent url(../imgs/icons/28x28/new-note.png) no-repeat scroll 0 0;
    
}

/*
 *  sidebar
 */

#sidebar {
    margin:0 5px;
    padding:0;
    height: 100%;
}
#sidebar ul {
    list-style-type:none;
    margin:0;
    padding:0;
}

#sidebar .sidebar-frame {
    margin-bottom:20px;
}
#sidebar #show-all-tags-btn-wrap {
    background:transparent url(../imgs/icons/28x28/enlarge.png) no-repeat scroll 0 0;
    margin-right:5px;
}
#sidebar h2.block-title {
    color:#FFFFFF;
    font-size:12px;
    height:32px;
    line-height:32px;
    margin:8px 0 0 0;
    padding:0;
    text-align:left;
    text-indent:15px;
}
#sidebar #tag-block-content {
    line-height:2em;
    max-height:140px;
    min-height:80px;
}
 a.tag-item {
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    -moz-border-radius-bottomleft:10px;
    -moz-border-radius-bottomright:10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color:#000000;
    color:#FFFFFF;
    margin:5px;
    opacity:0.7;
    padding:2px 10px;
    text-decoration:none;
}

.block-item-tag{
    -moz-border-radius-topleft:10px;
    -moz-border-radius-bottomright:10px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color:#000000;
    color:#FFFFFF;
    margin:5px;
    opacity:0.7;
    padding:2px 10px;
    text-decoration:none;
}

#note-block-content {
    border:1px solid #B1B1B1;
    height:300px;
    margin:0 5px 5px;
    overflow-x:hidden;
    overflow-y:auto;
}

#note-block-content li.note-item {
    background:transparent url(../imgs/icons/22x22/notebook.png) no-repeat scroll 0 0;
}

#note-block-content a.note-item-remove-btn {
    background:transparent url(../imgs/icons/22x22/remove.png) no-repeat scroll 0 0;
    float:right;
    height:22px;
    margin-right:8px;
    margin-top:2px;
    width:22px;
}

#note-block-content a.note-item-title {
    color:#FFFFFF;
    display:block;
    height:26px;
    line-height:1.5em;
    margin-top:5px;
    max-width:180px;
    padding-left:28px;
    padding-top:3px;
    text-decoration:none;
}
#note-block-content a.note-item-title:hover {
    background:transparent url(../imgs/list-item-hlight.png) repeat-x scroll 0 0;
    color:#FFFFFF;
}

/**
 * Center
 */ 
#content-wrap {
    height: 100%;
    padding: 5px;
    margin: 0 15px;

    -moz-border-radius-topleft:8px;
    -moz-border-radius-topright:8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
 
.content-view {
}
/**
 * Start page
 **/
#start-page-nav {
position: absolute;
}

#start-page .entry {
    background:transparent url(../imgs/cover/cover_entry.png) no-repeat scroll 0 0;
    display:block;
    width: 200px;
    height: 173px;
    position: absolute;
}

#start-page #entry-top {
    top:50px;
    left:249px;
}
#start-page #entry-lefttop {
    top: 135.5px;
    left:100px;
}
#start-page #entry-leftbottom {
    top: 307px;
    left: 100px;
}
#start-page #entry-center {
    top: 221.5px;
    left:249px;
}
#start-page #entry-righttop {
    top: 136px;
    left: 398px;
}
#start-page #entry-rightbottom {
    top: 307px;
    left: 398px;

}
#start-page #entry-bottom {
    top:393px;
    left:249px;
}

#start-page .label {
    color:#FFFFFF;
    font-size:16px;
    height:70px;
    padding:120px 0 0 0;
    position:absolute;
    text-align:center;
    text-decoration:none;
    width:200px;
}
#start-page .label:hover {
    background:transparent url(../imgs/cover/cover_entry_hlight.png) no-repeat scroll 0 0;
}

#start-page .entry-icon {
    float:right;
    margin:40px 65px;
    position:absolute;
}

/**
 * Notebook View
 */
.note-item {
    float:left;
    height:96px;
    margin:10px;
    width:96px;
    overflow: hidden;
}

.note-item:hover {
    -moz-border-radius-bottomleft:8px;
    -moz-border-radius-bottomright:8px;
    -moz-border-radius-topleft:8px;
    -moz-border-radius-topright:8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background: transparent url(../imgs/bg-box-black.png);

}

.note-item-title {
    margin:0 auto;
    text-align:center;
    color: #fff;
}

.note-item-title-replacement {
    width:90px;
    background:#fff url(../imgs/bg-box.png) repeat scroll 0 0;
    border:0 none;
}

.note-item-icon-wrap {

    display:block;
    height:64px;
    margin:3px auto 0 auto;
    width:64px;
}
.note-item-icon {
    border: 0;
}

/**
 * Normal Item View
 */
#content {
    height: 100%;
}
/** Normal Item View Untilities
 * */
#note-view-header {
    height:32px;
    padding: 3px;
}
#note-title-bar {
    color:#FFFFFF;
    height:32px;
    line-height:2em;
    padding-right:3px;
    text-align:center;
}

#note-title {
    float:left;
    margin:3px 5px 0;
    font-size: 16px;
    font-weight: bold;
}

#note-view-close-btn-wrap {
    background:transparent url(../imgs/icons/28x28/close.png) no-repeat scroll 0 0;
    float:right;
    margin:3px 5px 0;
}

#block-new-btn-wrap {
    background:transparent url(../imgs/icons/28x28/new-block.png) no-repeat scroll 0 0;
    float:right;
    margin:3px 5px 0;
}

#more-actions-btn-wrap {
    background:transparent url(../imgs/icons/28x28/more-acts.png) no-repeat scroll 0 0;
    float:right;
    margin:3px 5px 0;
}

#note-sys-bar {
    float:right;
}
#filter-box #filter {
    background:transparent url(../imgs/bg-box-black.png) repeat scroll 0 0;
    border:0 none;
    color:#FFFFFF;
    height:20px;
    max-width:400px;
    min-width:100px;
    padding-left:5px;
}
#filter-clear-btn {
    background:transparent url(../imgs/icons/22x22/edit-clear.png) no-repeat scroll 0 0;
    border:0 none;
    margin-left:-30px;
    width:40px;
}
#filter-box {
    padding: 2px;
}
#untility-bar {
    bottom:0;
    position:fixed;
    right:-1px;
    left:-1px;
    z-index:99;
}
/*==*/

div.block-item-content {
    padding:10px;
}
div.block-item {
    background-color:#ECECA3;
    border:1px solid #FFFFFF;
    width:auto;
}
.note-view-content div.block-item-drag-handler {
    background:transparent url(../imgs/block-handler.png) repeat scroll 0 0;
    padding-right:28px;
}
.note-view-content div.block-item-wrapper {
    background:transparent url(../imgs/block-bg.png) repeat scroll 0 0;
    padding:3px;
}
.note-view-content ul {
    height:100%;
    margin:0;
    padding:0;
}
.note-view-content li {
    list-style-type:none;
    padding:10px;
}
.note-view-content {
    height:93%;
    margin:0 10px;
    overflow-y:auto;
    width:98%;
}
.content-view {
    height:99%;
    margin:0 5px;
}

div.block-item-ctrl {
    float:right;
    margin:0 5px 5px 0;
    width:15%;
}
.block-item-tag-bar {
    border-top:1px solid #B1B1B1;
    line-height:2em;
    margin-left:10px;
    max-width:80%;
    min-height:20px;
    padding:0;
}
.block-item-remove-btn-wrap {
    background:transparent url(../imgs/icons/16x16/trash.png) repeat scroll 0 0;
    float:right;
}

.block-item-tag-btn-wrap {
    background:transparent url(../imgs/icons/16x16/tag.png) repeat scroll 0 0;
    float:right;
    margin:0 10px;
}

	/**
	 *	Basic Layout Theme
	 * 
	 *	This theme uses the default layout class-names for all classes
	 *	Add any 'custom class-names', from options: paneClass, resizerClass, togglerClass
	 *
	 *	Download a slightly more comprehensive stylesheet here:
	 *		http://layout.jquery-dev.net/demos/css/layout-default.css
	 */


.ui-layout-pane { /* all 'panes' */ 
    overflow: hidden;
} 

.ui-layout-resizer { /* all 'resizer-bars' */ 
    background: #DDD; 
} 

.ui-layout-toggler { /* all 'toggler-buttons' */ 
    background: #AAA; 
}


/*
 * Common style
 * */
.btn-base {
    display:block;
    height:28px;
    width:28px;
}

.btn-hlight {
    background:transparent none repeat scroll 0 0;
border:0 none;
    display:block;
    height:28px;
    width:28px;
}

.btn-hlight:hover {
    background:transparent url(../imgs/icons/28x28/btn-hlight.png) no-repeat scroll 0 0;
}

.block-small-btn-base {
    display:none;
    height:16px;
    margin:2px;
    width:16px;
}

.block-small-btn-hlight {
    display:block;
    height:16px;
    width:16px;
}
.float-left {
    float:left;
}
.float-right {
    float:right;
}
.float-fix {
    clear:both;
}
/**
 * jQuery UI
 */ 
.ui-tabs .ui-tabs-hide {
     display: none;
}

/**
 * UI tabs
 **/
.ui-tabs {
    height: 100%;
}

.ui-tabs-nav {
    padding: 0;
    list-style: none;
    display: block;
    padding: 5px;
}

.ui-corner-top {
    float: left;
    position:relative;
    -moz-border-radius-topleft:8px;
    -moz-border-radius-topright:8px;
    -moz-border-radius-bottomleft:8px;
    -moz-border-radius-bottomright:8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color:#000000;
    padding: 1px 8px;
    margin: 0 2px;
    line-height:1.3em;
    opacity: 0.7;
}

.ui-corner-top:hover {
    opacity: 1;
}


.ui-corner-top a {
    color: #fff;
    text-decoration: none;
    height: 16px;
    display:block;
}

.ui-corner-top img {
    border: 0;
}
.ui-tabs-selected {
    background: #fff none no-repeat 0 0;
    opacity: 1;
}

.ui-tabs-selected a {
    color: #000;
}
